|
一、背景
点击服务器信息右侧的编辑按钮,弹出表单，表单自动填充当前服务器信息的值，修改后提交到后端
二、效果
  将负责人改成李四后点击下方的立即提交按钮  修改成功 
三、前端代码
点击编辑页面的js,关键点在于content的值要带上ip的值
else if(obj.event === 'edit'){
layer.open({
type: 2,
content: "{% url 'modify_vm' %}?ip=" + data.ip,
area: ['40%','80%'],
title: ['修改服务器信息', 'font-size:28px;'],
});
}
修改服务器信息
运维管理系统
IP地址
CPU核心数
内存大小(G)
磁盘大小(G)
操作系统
所属部门
负责人
服务器状态
账号信息
用途
详细信息
立即提交
layui.use(['form','layer'], function(){ //导入模块
var form = layui.form;
var $ = layui.jquery;
var layer = layui.layer;
//从后端获取数据填充到表单
var vmInfo = {{ result.data | safe }}
document.getElementById('ip').value=vmInfo.ip; //修改默认值
document.getElementById('cpu').value=vmInfo.cpu;
document.getElementById('memory').value=vmInfo.memory;
document.getElementById('disk').value=vmInfo.disk;
document.getElementById('os').value=vmInfo.os;
document.getElementById('department').value=vmInfo.department;
document.getElementById('manager').value=vmInfo.manager;
//document.getElementById('status').value=vmInfo.status;
document.getElementById('account').value=vmInfo.account;
document.getElementById('label').value=vmInfo.label;
document.getElementById('info').value=vmInfo.info;
form.render();
//监听提交
form.on('submit(formDemo)', function(data){
$.ajax({
type: "PUT",
url: "{% url 'vmApi' %}",
data: data.field,
success: function (result) {
if (result.code == "0") {
layer.msg(result.msg, {
icon: 6,
time: 1000, //等待1秒
}, function () {
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //关闭弹出层
window.parent.location.reload(); //刷新父页面
}
);
} else {
layer.msg(result.msg, {icon: 5})
}
}
})
});
});
四、后端代码
def modify_vm(request):
if requesthod == "GET":
vm_dt = {} # 单台服务器字典
try:
ip = request.GET.get('ip', None)
vm_info = Vm_Info.objects.get(ip='%s' % ip)
vm_dt['ip'] = vm_info.ip
vm_dt['cpu'] = vm_info.cpu
vm_dt['memory'] = vm_info.memory
vm_dt['disk'] = vm_info.disk
vm_dt['os'] = vm_info.os
vm_dt['department'] = vm_info.department
vm_dt['manager'] = vm_info.manager
vm_dt['status'] = vm_info.status
vm_dt['account'] = vm_info.account
vm_dt['label'] = vm_info.label
vm_dt['info'] = vm_info.info
code = 0
msg = "获取数据成功"
except Exception as e:
print(e)
code = 1
msg = "获取数据失败"
result = {'code': code, 'data': vm_dt, 'msg': msg}
return render(request,'ops_center/vm_info/modify_vm.html',{'result': result})
def vmApi(request):
elif requesthod == "PUT":
try:
request_data = QueryDict(request.body)
ip = request_data.get('ip', None)
cpu = request_data.get("cpu", None)
memory = request_data.get("memory", None)
disk = request_data.get("disk", None)
os = request_data.get("os", None)
department = request_data.get("department", None)
manager = request_data.get("manager", None)
status = request_data.get("status", None)
account = request_data.get("account", None)
label = request_data.get("label", None)
info = request_data.get("info", None)
data = {**{'cpu': cpu, 'memory': memory, 'disk': disk, 'os': os, 'department': department, 'manager': manager,
'status': status, 'account': account, 'label': label, 'info': info}}
_t = Vm_Info.objects.get(ip='%s' % ip)
_t.__dict__.update(**data)
_t.save()
code = 0
msg = "修改成功"
result = {"code": code, "msg": msg}
print(status)
return JsonResponse(result)
except Exception as e:
print(e)
code = 1
msg = "修改失败"
result = {"code": code, "msg": msg}
return JsonResponse(result)
五、问题
从后端获取的状态不知道怎么通过document写进去，并添加checked属性
|